<template>
  <div class="home">
    <img class="logo" alt="Vue logo" src="@/assets/images/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div class="test-rem"></div>
    <p>home page</p>
    {{ count }}
    {{ "2019-3-4" | day }}
    <van-button type="primary" @click="addCount">ADD COUNT</van-button>
    <van-button type="primary" @click="cutCount">CUT COUNT</van-button>
    <ThemeButton title="提交"></ThemeButton>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <router-link to="/about?id=2">跳转about</router-link>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { mapGetters, mapMutations } from "vuex";
import { types as commonTypes } from "@/models/Common";
const getters = mapGetters({
  countGetter: commonTypes.COUNT
});
const setters = mapMutations({
  countSetter: commonTypes.COUNT
});
export default {
  name: "Home",
  components: {
    HelloWorld
  },
  mounted() {
    this.$dialog
      .confirm({
        title: "标题",
        message: "弹窗内容"
      })
      .then(() => {
        // on confirm
        this.$toast.success("成功文案");
      })
      .catch(() => {
        // on cancel
        this.$toast.fail("失败文案");
      });
      this.$storage.set('test','bbbbbbbb');
      console.log(this.$storage.get('test'));
  },
  computed: {
    ...getters,
    count: {
      get() {
        return this.countGetter;
      },
      set(val) {
        this.countSetter(val);
      }
    }
  },
  methods: {
    ...setters,
    addCount() {
      this.count++;
    },
    cutCount() {
      this.count--;
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  font-size: 16px;
  color: #f00;
}
.logo {
  width: 100px;
}
.test-rem {
  width: 100px;
  height: 100px;
}
</style>
